<template>
  <div>
    <el-row>
      <el-col :span="4" :offset="11" style="font-size: 18px;text-align: center;">
       <span>名称/联系人/电话/地址</span>
      </el-col>
      <el-col :span="4">
        <el-input v-model="condition" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" style="margin-left: 10px;">
        <el-button type="primary" icon="el-icon-search" @click="findWhByCondition">搜索</el-button>
      </el-col>
    </el-row>

    <el-dialog title="查看绑定门店" :visible.sync="dialogVisible1" width="70%" >
      <el-table
            :data="shopList"
            style="width: 100%">
            <el-table-column
              prop="shopName"
              label="门店名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="contact"
              label="仓库联系人"
              width="180">
            </el-table-column>
            <el-table-column
              prop="shopPhone"
              label="门店联系电话"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="门店地址"
              width="180">
            </el-table-column>
            <el-table-column
              prop="state"
              label="仓库状态"
              width="100">
              <template slot-scope="scope">
                {{scope.row.state==0?"正常":"禁用"}}
              </template>
            </el-table-column>
          </el-table>
    </el-dialog>

    <el-dialog title="修改仓库信息" :visible.sync="dialogVisible2" width="40%" >
      <el-row style="margin-top: 10px;">
        <el-col :span="16" :offset="2">
         <el-input v-model="pawnWarehouse.whName" >
           <template slot="prepend">仓库名</template>
         </el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-col :span="16" :offset="2">
        <el-input v-model="pawnWarehouse.contact" >
          <template slot="prepend">联系人</template>
        </el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-col :span="16" :offset="2">
        <el-input v-model="pawnWarehouse.whPhone">
          <template slot="prepend">联系电话</template>
        </el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-col :span="16" :offset="2">
        <el-input v-model="pawnWarehouse.address" >
           <template slot="prepend">联系电话</template>
        </el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updatePawnWarehouse">确定</el-button>
      </span>
    </el-dialog>

  <el-table
        :data="page.records"
        style="width: 100%">
        <el-table-column
          prop="whName"
          label="仓库名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="contact"
          label="仓库联系人"
          width="120">
        </el-table-column>
        <el-table-column
          prop="whPhone"
          label="仓库联系电话"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="仓库地址"
          width="180">
        </el-table-column>
        <el-table-column
          label="查看绑定门店"
          width="100">
          <template v-slot="scope">
           <el-button type="text"   @click="findbingdingshop(scope.row.pawnShops)" >查看</el-button>
           </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="仓库状态"
          width="80">
          <template slot-scope="scope">
            {{scope.row.state==0?"正常":"禁用"}}
          </template>
        </el-table-column>
        <el-table-column label="修改状态" width="100">
        <template v-slot="scope">
         <el-button type="success" size="small" round v-if="scope.row.state==1"  @click="updateWhStateStart(scope.row.warehouseId)">启用</el-button>
          <el-button type="danger" size="small" round v-if="scope.row.state==0"  @click="updateWhStateDown(scope.row.warehouseId)">禁用</el-button>
         </template>
        </el-table-column>
        <el-table-column label="修改仓库信息" width="120">
        <template v-slot="scope">
        <el-button type="text"   @click="updatePawnWarehouseWindow(scope.row.warehouseId)">修改</el-button>
         </template>
        </el-table-column>
      </el-table>
      <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </div>
  </div>
</template>

<script>
  export default{
    name:"FindWh",
    data(){
      return{
      page:{},//仓库分页对象
      pageNum:1,//分页参数
      pageSize:10,//分页参数
      condition:"",//条件查询
      shopList:[],//仓库绑定门店集合
      dialogVisible1:false,
      dialogVisible2:false,
      pawnWarehouse:{}//仓库对象
      }
    },
    methods:{
      /**
       *修改仓库信息
       */
      updatePawnWarehouse(){
      this.$http.post("/admin/pawnWarehouse/updatePawnWarehouse",this.pawnWarehouse).then(resp=>{
        if(resp.data.code==200){
          this.$message({
                    message: '修改仓库成功',
                    type: 'success'
                  });
        }else{
           this.$message.error(resp.data.message);
        }
        this.loadAllPawnWarehouse()
        this.dialogVisible2=false
        this.pawnWarehouse={}
      })
      },
      /**修改仓库信息窗口
       * @param {Object} warehouseId仓库Id
       */
      updatePawnWarehouseWindow(warehouseId){
        this.$http.get("/admin/pawnWarehouse/findWhById",{
         params:{
           warehouseId:warehouseId
         }
        }).then(resp=>{
          this.pawnWarehouse=resp.data.data
        })
        this.dialogVisible2=true
        this.pawnWarehouse.warehouseId=warehouseId
      },
      /**启用仓库
       * @param {Object} warehouseId
       */
      updateWhStateStart(warehouseId){
        this.$http.get("admin/pawnWarehouse/updatePawnWarehouseState",{
          params:{
            warehouseId:warehouseId,
            state:0
          }
        }).then(resp=>{
          if(resp.data.code==200){
            this.$message({
                      message: '启用仓库成功',
                      type: 'success'
                    });
          }else{
             this.$message.error(resp.data.message);
          }
          this.loadAllPawnWarehouse()
        })
      },
      /**禁用仓库
       * @param {Object} warehouseId
       */
      updateWhStateDown(warehouseId){
        this.$http.get("admin/pawnWarehouse/updatePawnWarehouseState",{
          params:{
            warehouseId:warehouseId,
            state:1
          }
        }).then(resp=>{
          if(resp.data.code==200){
            this.$message({
                      message: '禁用仓库成功',
                      type: 'success'
                    });
          }else{
             this.$message.error(resp.data.message);
          }
          this.loadAllPawnWarehouse()
        })
      },
      /**查看绑定门店
       * @param {Object} list
       */
      findbingdingshop(list){
        this.shopList=list
        this.dialogVisible1=true
      },
      /**
       * 条件查询仓库
       */
      findWhByCondition(){
       this.$http.get("/admin/pawnWarehouse/loadAllPawnWarehouse",{
         params:{
           pageNum:this.pageNum,
           pageSize:this.pageSize,
           condition:this.condition
         }
       }).then(resp=>{
         this.page=resp.data.data
       })
      },
      /**
       * 加载所有仓库
       */
    loadAllPawnWarehouse(){
      this.$http.get("/admin/pawnWarehouse/loadAllPawnWarehouse",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize
        }
      }).then(resp=>{
        this.page=resp.data.data
      })
    },
    /**分页查询
     * @param {Object} val
     */
    handleSizeChange(val) {
     this.pageSize=val
     this.loadAllPawnWarehouse()
    },
    /**分页查询
     * @param {Object} val
     */
    handleCurrentChange(val) {
     this.pageNum=val
     this.loadAllPawnWarehouse()
    },
    },
    created(){
      this.loadAllPawnWarehouse()
    }
  }
</script>

<style>
</style>
